<template>
  <div class="card" :class="title?'':'full'">
    <div v-if="title" class="card-header">
      <img class="header-icon" src="@/assets/images/theme-blue/common/card-icon.png" alt=""/>
      <div class="card-title">{{title}}</div>
    <div class="right-item">
      <div class="select-item" v-if="isSelect">
        <el-select v-model="selectId" placeholder="请选择" @change="changeSelect">
          <el-option class="select-crl"
              v-for="item in selectList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="export-item" v-if="isExport">
        <div class="export-btn" @click="change">详情</div>
        <i class="el-icon-d-arrow-right iconfont"></i>
      </div>
    </div>
    </div>
    <div class="card-content">
      <slot></slot>
    </div>
    <Dialog v-if="dialogInfo.show" :info="dialogInfo">
    <embed :src="path+page" type="application/pdf" width="100%" height="700px" />
    </Dialog>
  </div>
</template>
<script>
import Dialog from "@/components/dialog/Dialog";
export default {
  name:'Card',
  components: {Dialog},
  props:{
    title:{
      type:String,
    },
    page:{
      type:String,
    },
    isExport:{
      default:false
    },
    selectList:{
      type:Array,
    },
    isSelect:{
      default:false
    },
    use2025Path: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return{
      selectId:4,
      dialogInfo:{
        show:false,
        title:'肃州区经济社会基本情况数据库',
        width: '1900px',
      },
      path: this.use2025Path ? 'http://60.165.22.79:3032/2025_document.pdf#page=' : 'http://60.165.22.79:3032/industrialEconomicOperation.pdf#page='
    }
  },
  methods:{
    changeSelect(){
      this.$emit('changeSelect', this.selectId,this.title);
    },
    change(){
      this.dialogInfo.show=true
    }
  },
  mounted() {
  }
}
</script>
<style lang="scss">
.el-input__inner{
  background: rgba(255,255,255,.1);
  height: 28px;
  color: #FFFFFF;
}
.el-input__icon{
 line-height: 28px;
}
</style>
<style lang="scss" scoped>
.card {
  width: 100%;
  height: 100%;

  .card-header {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 8px;
    border-left: 5px solid #1978E6;
    background: rgba(2, 18, 109, 0.6);
    backdrop-filter: blur(4px);
    position: relative;
    padding-right: 15px;
    .right-item{
      display: flex;
      color: #FFFFFF;
      align-items: center;
      .select-item{
        width: 120px;
        margin-right: 30px;
      }
      .export-item{
        display: flex;
        align-items: center;
        .export-btn{
          color: #ffffff;
          font-size: 14px;
          cursor: pointer;
          padding-bottom: 4px;
          margin-right: 4px;
        }
        .iconfont{
          font-size: 13px;
        }
      }
    }

    .header-icon {
      width: 10px;
      height: 15px;
      margin-right: 20px;
    }

    .card-title {
      color: #fff;
      text-shadow: 0 2px 24px rgba(27, 126, 242, 0.91);
      flex-grow: 1;
      font-size: 16px;
    }
  }

  .card-content {
    height: calc(100% - 40px);
    width: 100%;
    background: rgba(1, 1, 75, 0.6);
    backdrop-filter: blur(4px);
  }
}

.card.full {
  .card-content {
    width: 100%;
    height: 100%;
  }
}
</style>
